<template>
  <div>
    <div id="myChart" style="width: 1200px;height: 400px"></div>
    <div>
      <el-date-picker type="year" v-model="year" value-format="YYYY"
                      placeholder="选择时间" style="margin-left: 400px"></el-date-picker>
      <el-button type="primary" v-on:click="init()" style="margin-left: 30px;margin-bottom: 5px">查询</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import axios from "axios";

export default {
  name: "saleStatisticsMonth",
  mounted() {
    echarts.use([
      DatasetComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      BarChart,
      CanvasRenderer
    ]);
    this.init()
  },
  data() {
    return {

        year:''

    }
  },
  methods: {
    init() {
      var chartDom = document.getElementById('myChart');
      var myChart = echarts.init(chartDom);
      var option;
      let param = new URLSearchParams();
      param.append("year", this.year)
      axios.post('/api/saleStatistics/selectMonth', param).then(response => {
        console.log(response.data)
        option = {
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['months', 'computerProducts', 'securityProducts', 'printScanningEquipment', 'officeConsumables'],
            source: response.data
          },
          xAxis: {type: 'category'},
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
        myChart.setOption(option);
      })
    },
    pickerOptions: {
      //disabled为函数，返回值为布尔值，
      disabledDate: (time) => {
        let minYear = new Date().getFullYear() - 30
        return time > Date.now() || time.getTime() < new Date(JSON.stringify(minYear))
      }
    },
  }
}
</script>

<style scoped>

</style>